import React, { useEffect, useState } from 'react';
import { Table, DatePicker, Select, Pagination } from 'antd';
const { RangePicker } = DatePicker;
import { saveAs } from 'file-saver';
import { Resizable } from 'react-resizable';
// import './index.css';
// import { ifyPost } from '../../../Api/api';
import './index.less';
import { Input, Space, Button, Card } from 'antd';
import axios from 'axios';

// 调整table表头
const ResizeableTitle = (props) => {
  const { onResize, width, ...restProps } = props;

  if (!width) {
    return <th {...restProps} />;
  }

  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};

// 拖拽调整table
const index = () => {
  // table 数据
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const onSelectChange = (newSelectedRowKeys, record) => {
    console.log(newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const [cols, setCols] = useState([
    {
      title: '出差主题',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '员工姓名',
      dataIndex: 'name2',
      key: 'name2',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '员工岗位',
      dataIndex: 'post',
      key: 'post',
      ellipsis: true,
      align: 'center',

      width: 120,
    },
    {
      title: '员工部门',
      dataIndex: 'department',
      align: 'center',
      ellipsis: true,

      key: 'department',
      width: 120,
    },
    {
      title: '申请时间',
      dataIndex: 'time',
      align: 'center',
      key: 'time',
      ellipsis: true,
      width: 120,
    },
    {
      title: '开始时间',
      dataIndex: 'time2',
      key: 'time2',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '流程状态',
      dataIndex: 'state2',
      key: 'state2',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '结束时间',
      dataIndex: 'time3',
      key: 'time3',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '出差时长',
      dataIndex: 'accomplish',
      key: 'accomplish',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '流程状态',
      dataIndex: 'state2',
      key: 'state2',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <a key="editable">过程</a>,
        <a key="editable">催办</a>,
      ],
    },
  ]);
  const [columns, setColumns] = useState([
    {
      title: '出差主题',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '员工姓名',
      dataIndex: 'name2',
      key: 'name2',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '员工岗位',
      dataIndex: 'post',
      key: 'post',
      ellipsis: true,
      align: 'center',

      width: 120,
    },
    {
      title: '员工部门',
      dataIndex: 'department',
      align: 'center',
      ellipsis: true,

      key: 'department',
      width: 120,
    },
    {
      title: '申请时间',
      dataIndex: 'time',
      align: 'center',
      key: 'time',
      ellipsis: true,
      width: 120,
    },
    {
      title: '开始时间',
      dataIndex: 'time2',
      key: 'time2',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '流程状态',
      dataIndex: 'ify',
      key: 'ify',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '结束时间',
      dataIndex: 'time3',
      key: 'time3',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '出差时长',
      dataIndex: 'accomplish',
      key: 'accomplish',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '流程状态',
      dataIndex: 'state2',
      key: 'state2',
      ellipsis: true,
      align: 'center',
      width: 120,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <a key="editable">过程</a>,
        <a key="editable">催办</a>,
      ],
    },
  ]);

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  // 定义头部组件
  const components = {
    header: {
      cell: ResizeableTitle,
    },
  };

  // 处理拖拽
  const handleResize =
    (index) =>
    (e, { size }) => {
      const nextColumns = [...cols];
      // 拖拽是调整宽度
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };

      setCols(nextColumns);
    };

  useEffect(() => {
    setColumns(
      (cols || []).map((col, index) => ({
        ...col,
        onHeaderCell: (column) => ({
          width: column.width,
          onResize: handleResize(index),
        }),
      })),
    );
    getList();
  }, [cols]);

  const [dataSource, setdata] = useState();
  const getList = async (page, pageSize) => {
    const { data } = await axios.get(
      `http://localhost:3000/come?_page=${page}&_limit=${pageSize}`,
    );
    // console.log(data);
    setdata(data);
    const data2 = await axios.get(`http://localhost:3000/come`);
    settotal(data2.data.length);
  };

  //导出
  const handleExport = async () => {
    let { data } = await axios.get(`http://localhost:3000/come`);
    console.log(data);
    const fileStream = JSON.stringify(data);
    const blob = new Blob([fileStream]);
    saveAs(blob, `请假单.xls`);
  };
  const [page, setpage] = useState(1);
  const [pageSize, setpageSize] = useState(2);
  const [total, settotal] = useState(10);
  const pageOnchange = (page, pageSize) => {
    getList(page, pageSize);
  };

  return (
    <div className="report">
      <div className="btns">
        <Button className="user_btn">新增</Button>
        <Button className="user_btn">修改</Button>
        <Button className="user_btn">删除</Button>
        <Button className="user_btn">过滤</Button>
        <Button className="user_btn">还原</Button>
        <Button className="user_btn">导入</Button>
        <Button className="user_btn" onClick={handleExport}>
          导出
        </Button>
        <Button className="user_btn">查看日志</Button>
      </div>

      <div className="TableStyle">
        <span className="span1">我的出勤申请</span>
        <Table
          size="small"
          style={{ marginTop: '30px', backgroundColor: '#fff' }}
          rowSelection={rowSelection}
          bordered
          components={components}
          columns={columns}
          dataSource={dataSource}
          scroll={{
            x: 1400,
          }}
          pagination={false}
          rowKey={(columns) => columns._id}
        />
        <Pagination
          defaultCurrent={1} // 默认在第一个页面
          defaultPageSize={2} // 默认一个页面显示3个数据
          // 点击页面触发更新，点击时，默认传入页面值，例如第一页，值为1
          onChange={pageOnchange}
          // 设置整个数据的总数量
          showSizeChanger
          pageSizeOptions={[1, 2, 3, 5]}
          total={total}
        />
      </div>
    </div>
  );
};

export default index;
